<template>
  <div class="scenery">
    <div class="content">
      <h2>风景欣赏</h2>
      <hr>
      <section class="detail">
        <div v-for="(item, index) in list" class="item" :key="index">
          <img :src="item.image" alt='曼谷-芭提雅6日游'>
          <p>{{ item.title }}</p>
        </div>
      </section>
      <el-pagination
        class="pagination-bottom"
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage">
      </el-pagination>
      <!-- <div class="more"><a href='#'>加载更多...</a></div> -->
    </div>
    <sidebox />
  </div>

</template>
<script>
import Sidebox from '@/components/public/sidebox.vue';
export default {
  components: {
    Sidebox
  },
  data() {
    return {
      query: {
        pageSize: 10,
        currentPage: 1,
      },
      total: 0,
      list: [
        {
          image: require('../../assets/images/tour1.jpg'),
          title: '曼谷-芭提雅（共8张）'
        },
        {
          image: require('../../assets/images/tour2.jpg'),
          title: '曼谷-芭提雅（共8张）'
        },
        {
          image: require('../../assets/images/tour3.jpg'),
          title: '曼谷-芭提雅（共8张）'
        },
        {
          image: require('../../assets/images/tour4.jpg'),
          title: '曼谷-芭提雅（共8张）'
        },
        {
          image: require('../../assets/images/tour5.jpg'),
          title: '曼谷-芭提雅（共8张）'
        },
        {
          image: require('../../assets/images/tour6.jpg'),
          title: '曼谷-芭提雅（共8张）'
        }
      ]
    }
  },
  methods: {
    changePage(page) {
      this.query.currentPage = page
      this.getList()
    },
  }
}
</script>
<style lang="scss" scoped>
.scenery {
  margin: 20px 30px 90px;
  display: flex;

  .content {
    margin-top: 20px;
    position: relative;
    hr {
      width: 440px;
      margin-left: 25px;
      background: #409eff;
    }
    h2 {
      margin-left: 25px;
    }
    .detail {
      margin: 20px;
    }
    .item {
      display: inline-block;
      width: 440px;
      border:1px solid #ddd;
      border-radius:4px;
      margin: 10px;
      position: relative;
      p {
        text-align: center;
      	padding:5px 0;
      }
      img {
        width: 440px;
      }
    }
    .more {
      width:200px;
      height: 40px;
      border-radius: 4px;
      border: 1px solid #000;
      line-height: 40px;
      text-align: center;
      margin: 20px auto;

      a {
        text-decoration: none;
  	    color: #666;
      }
    }
     .pagination-bottom {
      position: absolute;
      left: 50%;
      bottom: -40px;
      transform: translateX(-50%);
    }
  }
}
</style>
